@use "../mixins/bem" as *;
@use "../mixins/function" as *;

@include b(bannerContent) {
  padding-top: 3rem;
  color: getCssVar("banner-text-color");
  text-align: center;

  @include e(content__title) {
    font-size: getCssVar("banner-title-text");
    font-weight: 600;
    line-height: 1.25;
  }

  @include e(content__desc) {
    font-size: getCssVar("banner-desc-text");
    max-width: 50rem;
    line-height: 1.3;
    margin: 1.5rem auto;
    min-height: 32px;

    .switch {
      animation: fadeIn 1s ease-in-out;
      cursor: pointer;
    }

    .typed {
      opacity: 1;
      &.is-animation {
        animation: fadeOut 1s infinite;
      }
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    @keyframes fadeOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
  }
}
